<template>
    <div class="species-introduction container-bottom-20">
        <CardBox title="物候统计"></CardBox>
        <div class="content-container content-container-height-262">
            <div class="genus-trend-chart" ref="genusTrendChart" style="height: 262px;"></div>
        </div>
    </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import * as echarts from "echarts";
export default {
    components: {
        CardBox
    },
    data() {
        return {
            genusTrendChart: null,
            chartData: {
            }
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData(){
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
            const day = currentDate.getDate();
            const today=`${year}-${month}-${day}`;
            const lastYear=`${year-1}-${month}-${day}`;
            this.$api.patrol.groupByKSZ(lastYear,today).then(res => {
                if(res){
                    this.chartData= res;
                    this.initGenusTrendChart();
                }

            });
        },
        initGenusTrendChart() {
            const chartDom = this.$refs.genusTrendChart
            if (!chartDom) return

            this.genusTrendChart = echarts.init(chartDom)

            const option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
                        data: [this.chartData],
                        left: '2%',
                        right: '2%',
                        top: '8%',
                        bottom: '20%',
                        symbol: 'emptyCircle',
                        orient: 'vertical',
                        expandAndCollapse: true,
                        label: {
                            position: 'top',
                            rotate: -90,
                            verticalAlign: 'middle',
                            align: 'right',
                            color:'#fff',
                            fontSize: 9
                        },
                        lineStyle:{
                            color: 'rgba(255,255,255,0.3)',
                        },
                        leaves: {
                            label: {
                                position: 'bottom',
                                rotate: -90,
                                color: 'rgba(255,255,255,0.3)',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },
                        animationDurationUpdate: 750
                    }
                ]
            }

            this.genusTrendChart.setOption(option)
        }
    },
    beforeDestroy() {
        // 组件销毁前清理图表实例
        if (this.genusTrendChart) {
            this.genusTrendChart.dispose()
            this.genusTrendChart = null
        }
    }
}
</script>

<style lang="scss" scoped>

</style>